<template>
  <div style="margin: 0 20px">
    <el-table
      :data="menuList"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :expand-row-keys="['1']"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      border
    >
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="code" label="权限值"> </el-table-column>
      <el-table-column prop="toCode" label="跳转权限值"> </el-table-column>
      <el-table-column prop="prop" label="操作">
        <template slot-scope="{ row }">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-plus"
            :disabled="row.level === 4"
            :title="row.level === 4 ? '添加功能' : '添加菜单'"
            @click="openAddMenuOrFeature(row)"
          ></el-button>
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            :disabled="row.level === 1"
            :title="row.level === 4 ? '修改功能' : '修改菜单'"
            @click="openUpdateMenuOrFeature(row)"
          ></el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            :disabled="row.level === 1"
            :title="row.level === 4 ? '删除功能' : '删除菜单'"
            @click="removeMenuOrFeature(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加菜单|功能的对话框 -->
    <el-dialog
      :title="`添加${title}`"
      :visible.sync="addDialogVisible"
      width="50%"
    >
      <el-form
        ref="form"
        :model="menuOrFeatureInfo"
        label-width="120px"
        :rules="rules"
      >
        <el-form-item label="父级名称" v-show="isShowFatherInput">
          <el-input
            :disabled="true"
            v-model="menuOrFeatureInfo.fatherName"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input v-model="menuOrFeatureInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="menuOrFeatureInfo.code"></el-input>
        </el-form-item>
        <el-form-item label="跳转路由权限值" v-show="isShowToCode">
          <el-input v-model="menuOrFeatureInfo.toCode"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAddMenuOrFeature">取 消</el-button>
        <el-button type="primary" @click="addMenuOrFeature('form')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改菜单|功能的对话框 -->
    <el-dialog
      :title="`修改${updateTitle}`"
      :visible.sync="updateDialogVisible"
      width="50%"
    >
      <el-form
        ref="updateForm"
        label-width="120px"
        :rules="rules"
        :model="updateInfo"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="updateInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="功能权限值" prop="code">
          <el-input v-model="updateInfo.code"></el-input>
        </el-form-item>
        <el-form-item label="跳转路由权限值" v-show="isShowToCode">
          <el-input v-model="updateInfo.toCode"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelUpdate">取 消</el-button>
        <el-button type="primary" @click="updateMenuOrFeature('updateForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
// 引入深克隆库
import cloneDeep from "lodash/cloneDeep";
export default {
  name: "Permission",
  data() {
    return {
      // 控制添加菜单对话框的显示与隐藏
      addDialogVisible: false,
      // 添加菜单|功能对话框的标题
      title: "",
      // 表单验证
      rules: {
        name: [{ required: true, message: "名称必须输入", trigger: "blur" }],
        code: [
          {
            required: true,
            message: "功能权限值必须输入",
            trigger: "blur",
          },
        ],
      },
      // 控制父级名称文本框的显示与隐藏
      isShowFatherInput: false,
      // 控制跳转路由权限值的显示与隐藏
      isShowToCode: false,
      // 添加菜单要发送给服务器的数据
      menuOrFeatureInfo: {
        fatherName: "",
        name: "",
        code: "",
        toCode: "",
      },
      // 控制修改菜单|功能对话框的显示与隐藏
      updateDialogVisible: false,
      // 修改菜单|功能对话框存储的数据(发送给服务器)
      updateInfo: {},
      // 修改菜单|功能对话框的标题
      updateTitle: "",
    };
  },
  computed: {
    ...mapState("menu", ["menuList"]),
  },
  methods: {
    // 获取菜单管理数据的函数
    getMenuList() {
      // 派发acitons
      this.$store.dispatch("menu/getMenuList");
    },
    // 打开添加菜单|功能的对话框
    openAddMenuOrFeature(row) {
      this.addDialogVisible = true;
      if (row.level === 1) {
        this.title = "一级菜单";
        this.isShowFatherInput = false;
        this.isShowToCode = false;
        this.type = 1;
      } else if (row.level === 2) {
        this.title = "二级菜单";
        this.isShowFatherInput = true;
        this.isShowToCode = false;
        // 将父级名称赋值到文本框双向绑定的属性上
        this.menuOrFeatureInfo.fatherName = row.name;
        this.type = 1;
      } else {
        this.title = "功能";
        this.isShowFatherInput = true;
        this.isShowToCode = true;
        // 将父级名称赋值到文本框双向绑定的属性上
        this.menuOrFeatureInfo.fatherName = row.name;
        this.type = 2;
      }
      // 添加父级的id
      this.$set(this.menuOrFeatureInfo, "pid", row.id);
    },
    // 取消添加菜单|功能
    cancelAddMenuOrFeature() {
      this.addDialogVisible = false;
      // 清空menuOrFeatureInfo
      for (let k in this.menuOrFeatureInfo) {
        this.menuOrFeatureInfo[k] = "";
      }
      // 清空表单验证的警示
      this.$refs.form.resetFields();
    },
    // 添加菜单|功能
    addMenuOrFeature(formName) {
      // 表单验证
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 表单验证通过
          try {
            // 发送actions
            await this.$store.dispatch(
              "menu/addMenuOrFeature",
              this.menuOrFeatureInfo
            );
            // 成功的提示信息
            this.$message({
              message: "保存成功",
              type: "success",
            });
            // 关闭对话框
            this.addDialogVisible = false;
            // 重新加载菜单数据
            this.getMenuList();
            // 清空menuOrFeatureInfo
            this.menuOrFeatureInfo = {};
          } catch (error) {
            // 失败的提示信息
            this.$message({
              message: "保存失败",
              type: "error",
            });
          }
        } else {
          return false;
        }
      });
    },
    // 打开修改菜单|功能的对话框
    openUpdateMenuOrFeature(row) {
      this.updateDialogVisible = true;
      // 深克隆
      this.updateInfo = cloneDeep(row);
      if (row.level === 4) {
        this.updateTitle = "功能";
        this.isShowToCode = true;
      } else {
        this.isShowToCode = false;
        this.updateTitle = "菜单";
      }
    },
    // 取消修改
    cancelUpdate() {
      this.updateDialogVisible = false;
      // 清空表单验证的警示
      this.$refs.updateForm.resetFields();
    },
    // 确认修改
    updateMenuOrFeature(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 表单验证通过
          try {
            // 派发action
            await this.$store.dispatch(
              "menu/updateMenuOrFrature",
              this.updateInfo
            );
            // 成功的提示信息
            this.$message({
              message: "修改成功",
              type: "success",
            });
            // 关闭对话框
            this.updateDialogVisible = false;
            // 重新获取菜单列表数据
            this.getMenuList();
          } catch (error) {
            // 失败的提示信息
            this.$message({
              message: "修改失败",
              type: "error",
            });
          }
        } else {
          return false;
        }
      });
    },
    // 删除菜单|功能的回调
    removeMenuOrFeature(row) {
      const title = row.level === 4 ? "功能" : "菜单";
      this.$confirm(`此操作将永久删除该${title}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            // 派发actions,
            await this.$store.dispatch("menu/removeMenuOrFeature", row.id);
            // 成功的提示信息
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            // 重新获取菜单列表数据
            this.getMenuList()
          } catch (error) {
            // 失败的提示信息
            this.$message({
              type: "error",
              message: "删除失败!",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getMenuList();
  },
};
</script>

<style>
</style>